<!-- src/views/warehousing/index.vue -->
<script setup>
import { ref } from 'vue';
import entryList from './entry/entryList.vue';
import entryDetailsList from './entryDetails/entryDetailsList.vue';
import entryDetailsSortList from './entryDetailsSort/entryDetailsSortList.vue';
import entryUpList from './entryUp/entryUpList.vue';
import toBeUp from './toBeUp/toBeUp.vue';
import alreadyListed from './alreadyListed/alreadyListed.vue';

// 用于记录已激活的标签页
const activeTab = ref('0');

// 标签页切换时触发
const handleTabChange = (tabName) => {
  activeTab.value = tabName;
};
</script>

<template>
  <el-tabs 
    type="border-card" 
    class="warehouse-tabs"
    v-model:active-name="activeTab"
    @tab-change="handleTabChange"
  >
    <el-tab-pane label="到货通知" name="0">
      <entryList v-if="activeTab === '0'"></entryList>
    </el-tab-pane>
    
    <el-tab-pane label="待到货" name="1">
      <entryDetailsList v-if="activeTab === '1'"></entryDetailsList>
    </el-tab-pane>

    <el-tab-pane label="待卸货" name="2">
      <entryDetailsSortList v-if="activeTab === '2'"></entryDetailsSortList>
    </el-tab-pane>
    
    <el-tab-pane label="待分拣" name="3">
      <entryUpList v-if="activeTab === '3'"></entryUpList>
    </el-tab-pane>

    <el-tab-pane label="待上架" name="4">
      <toBeUp v-if="activeTab === '4'"></toBeUp>
    </el-tab-pane>

    <el-tab-pane label="已上架" name="5">
      <alreadyListed v-if="activeTab === '5'"></alreadyListed>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped>
.warehouse-tabs {
  --el-tabs-header-height: 60px;
}

.warehouse-tabs :deep(.el-tabs__header) {
  margin-bottom: 20px;
}

.warehouse-tabs :deep(.el-tabs__nav) {
  width: 100%;
  display: flex;
}

.warehouse-tabs :deep(.el-tabs__item) {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #606266;
  transition: all 0.3s;
}

.warehouse-tabs :deep(.el-tabs__item:hover) {
  color: #409eff;
}

.warehouse-tabs :deep(.el-tabs__item.is-active) {
  color: #409eff;
  font-weight: 600;
  background-color: #f5f7fa;
}

.warehouse-tabs :deep(.el-tabs__content) {
  min-height: 300px;
  padding: 20px;
}

.warehouse-tabs :deep(.el-tab-pane) {
  font-size: 14px;
  color: #303133;
}
</style>